<template>
  <div class="container-fluid">
    <form action="" ref="form">
      <input type="hidden" name="oid" :value="order.orderId">
      <input type="hidden" name="oname" :value="order.orderCode">
      <input type="hidden" name="money" :value="totalFee">
       <input type="hidden" name="desc" value="">
    </form>
    <div class="row">
      <div class="col-md-12">
        <a
          ref="confirmModal"
          :id="'modal' + order.orderId"
          :href="'#modal-container-' + order.orderId"
          role="button"
          class="btn"
          data-toggle="modal"
          style="display: none"
        ></a>
        <div
          class="modal fade"
          :id="'modal-container-' + order.orderId"
          role="dialog"
          aria-labelledby="myModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">操作确认</h5>
                <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                {{ message }}
              </div>
              <div class="modal-footer">
                <button
                  class="btn btn-primary"
                  @click="doHandleOrder"
                  type="button"
                >
                  确认
                </button>
                <button
                  class="btn btn-default"
                  type="button"
                  data-dismiss="modal"
                >
                  关闭
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="panel panel-info">
    <div class="panel-heading">
      下单日期：
      {{ orderDate }}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 订单号：<router-link
        :to="{ name: 'OrderDetail', params: { id: order.orderId } }"
        >{{ order.orderCode }}</router-link
      >
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 订单状态：
      <span>
        {{ orderStatus }}
        <div class="text-right" v-if="order.orderStatus == 0">
          <a
            href="#"
            @click="handleOrder(order.orderId, 9, '确认要取消订单吗？')"
            >取消订单</a
          >
          | <a href="#" @click.prevent="toPay(order)">去付款</a>
        </div>
        <div class="text-right" v-if="order.orderStatus == 1">
          <a
            href="#"
            @click.prevent="handleOrder(order.orderId, 2, '确定要申请退款吗？')"
            >申请退款</a
          >
        </div>
        <div class="text-right" v-if="order.orderStatus == 4">
          <a
            href="#"
            @click.prevent="handleOrder(order.orderId, 5, '确定要收货吗')"
            >确认收货</a
          >
          <a
            href="#"
            @click.prevent="handleOrder(order.orderId, 6, '确定要申请退货吗')"
            >申请退货</a
          >
        </div>
      </span>
    </div>
    <div class="panel-body">
      <table class="table table-hover table-condensed table-bordered">
        <tbody>
          <tr v-for="item in order.odetails" :key="item.odetailId">
            <td>
              <img :src="SERVER_URL + item.odetailPic" width="30" height="30" />
            </td>
            <td>
              <router-link
                :to="{ name: 'ProductDetail', params: { id: item.goodsId } }"
                >{{ item.odetailName }}&nbsp;&nbsp;{{
                  item.odetailColor
                }}
                &nbsp;&nbsp;{{ item.odetailSize }}
              </router-link>
            </td>
            <td>
              <span class="glyphicon glyphicon-yen" aria-hidden="true"></span
              >{{ item.odetailPrice }}
            </td>
            <td>{{ item.odetailNum }}</td>
            <td>
              <span class="glyphicon glyphicon-yen" aria-hidden="true"></span
              >{{ item.odetailPrice * item.odetailNum }}
            </td>
          </tr>
        </tbody>
      </table>
      <table class="table table-condensed">
        <tbody>
          <tr>
            <td>
              <router-link
                class="btn btn-info"
                :to="{ name: 'OrderDetail', params: { id: order.orderId } }"
                >查看订单详情</router-link
              >
            </td>
            <td class="text-right">
              总金额（含运费{{ order.orderPostalfee }}元）：<span
                class="glyphicon glyphicon-yen"
                aria-hidden="true"
              ></span
              >{{ totalFee }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { SERVER_URL, http } from "../../utils/http";
export default {
  props: ["order"],
  data() {
    return {
      SERVER_URL,
      orderId: "",
      status: -1,
      message: "",
    };
  },
  computed: {
    orderStatus() {
      let status = "";
      switch (this.order.orderStatus) {
        case 0:
          status = "等待付款";
          break;
        case 1:
          status = "未发货";
          break;
        case 2:
          status = "已提交退款申请，请等待商家处理";
          break;
        case 3:
          status = "退款成功";
          break;
        case 4:
          status = "已发货";
          break;
        case 5:
          status = "交易成功";
          break;
        case 6:
          status = "已提交退货申请，请等待商家处理";
          break;
        case 7:
          status = "退货中";
          break;
        case 8:
          status = "退货成功";
          break;
        case 9:
          status = "交易关闭";
      }
      return status;
    },
    orderDate() {
      if (this.order && this.order.orderDate) {
        return this.order.orderDate.substring(0, 10);
      } else {
        return "";
      }
    },
    totalFee() {
      let fee = 0;
      if (this.order.odetails) {
        for (let item of this.order.odetails) {
          fee = fee + item.odetailPrice * item.odetailNum;
        }
        fee = fee + this.order.orderPostalfee;
      }
      return fee;
    },
  },
  methods: {
    handleOrder(orderId, status, message) {
      this.orderId = orderId;
      this.status = status;
      this.message = message;
      this.$refs.confirmModal.click();
    },
    doHandleOrder() {
      const params = new URLSearchParams();
      params.append("orderId", this.orderId);
      params.append("status", this.status);
      http.post("/order/handleOrderStatus", params).then((resp) => {
        if (resp.data.code == 0) {
          this.$store.dispatch("order/fetchMyOrders");
        }
      });
    },
    toPay(order) {
    console.log(order)
    let form=this.$refs.form;
    form.action=SERVER_URL+'/pay'
    form.method='post'
    form.submit();
    },
  },
};
</script>